@import vars
@import fonts
@import libs
@import cleancss

::placeholder
	color: #666

::selection
	background-color: $color-primary-strong-cyan
	color: white

input, textarea
	outline: none
	&:focus:required:invalid
		border-color: red
	&:required:valid
		border-color: green

body
	background: #fff url(../img/bg-header-desktop.png) no-repeat center top
	background-size: 100% auto
	font-size: 18px
	position: relative
	line-height: 1.65
	font-family: 'Bai', sans-serif
	overflow-x: hidden
	color: $color-neutral-dgb

.container-general
	min-width: 375px
	max-width: 1440px
	display: grid
	grid-template-rows: repeat(6, auto)
	grid-template-columns: 1fr
	grid-row-gap: 40px
	margin: 0 auto

h1, h2, h3
	font-weight: 600
	text-align: center
h1
	font-size: 2.5rem
	padding: $gutter
h2
	font-size: 2.063rem
	padding: $gutter
h3
	font-size: 1.65rem

p
	color: $color-neutral-grayish-blue

header
	display: grid
	grid-template-rows: repeat(4, auto)
	margin-bottom: 160px
	svg
		justify-self: center
		margin:
			top: 130px
			bottom: 68px
	h1
		margin-bottom: 20px
		padding: $gutter
	p
		padding: $gutter
		justify-self: center
		margin-bottom: 40px
		text-align: center
		max-width: 700px
		+media-breakpoint-down(sx)
			max-width: 100vw

.two-btn
	justify-self: center
	button
		width: 227px
		font-size: 0.95rem
		font-weight: 600
		border-radius: 40px
		border: none
		color: #ffffff
		padding: 20px
		&:first-child
			background-color: $color-primary-strong-cyan
			box-shadow: 0 4px 0 0 darken($color-primary-strong-cyan, 5%)
			&:hover
				background-color: lighten($color-primary-strong-cyan, 5%)
				box-shadow: 0 4px 0 0 lighten($color-primary-strong-cyan, 5%)
		&:last-child
			background-color: $color-primary-light-blue
			box-shadow: 0 4px 0 0 darken($color-primary-light-blue, 5%)
			&:hover
				background-color: lighten($color-primary-light-blue, 5%)
				box-shadow: 0 4px 0 0 lighten($color-primary-light-blue, 5%)

.main
	display: grid
	h2
		padding: $gutter
	> p
		text-align: center
		max-width: 700px
		justify-self: center
		padding: $gutter
		+media-breakpoint-down(sx)
			max-width: 100vw
	.desktop-full
		display: grid
		grid-template-columns: 1fr 1fr
		grid-column-gap: 110px
		margin:
			top: 86px
			bottom: 160px
		.img-desktop img
			width: 100%
			height: auto
			position: relative
			left: -30px
			clip-path: inset(0 0 0 30px)
		.text-desktop
			display: grid
			grid-template-columns: minmax(340px, 355px)
			align-content: space-evenly
			h3
				text-align: left
			p
				font-size: 0.889rem
				padding-bottom: 40px

.devices-sec
	display: grid
	justify-content: center
	margin-bottom: 100px
	h2
		padding-bottom: 30px
	p
		max-width: 700px
		text-align: center
		justify-self: center
		padding: 0 $gutter
		+media-breakpoint-down(sx)
			max-width: 100vw
	img
		padding-top: 100px
		width: 100%
		margin: auto 0

.block-change
	display: grid
	grid-template-rows: auto
	p
		text-align: center
	.block-icons
		display: grid
		grid-template-columns: repeat(auto-fill, minmax(355px, 360px))
		grid-template-rows: auto
		grid-gap: 30px
		text-align: center
		justify-content: space-evenly
		margin-top: 70px
		svg
			height: 50px
			margin-bottom: 30px
		h3
			margin-bottom: 30px
		p
			padding: 0 $gutter
		+media-breakpoint-down(sx)
			grid-template-columns: 1fr

.block-vendors
	display: grid
	grid-template-columns: repeat(auto-fill, minmax(166px, 200px))
	grid-auto-flow: row
	grid-gap: 20px
	justify-content: space-evenly
	align-items: center
	margin: 100px 20px

.block-clipboard
	display: grid
	margin-bottom: 100px
	p
		margin-bottom: 50px
		text-align: center
		max-width: 700px
		justify-self: center
		+media-breakpoint-down(sx)
			max-width: 100vw

footer
	display: grid
	grid-template-columns: 1fr minmax(auto, 800px) 1fr
	grid-template-rows: 65px
	background-color: #f5f6f8
	padding:
		top: 45px
		bottom: 45px
	.footer-logo
		justify-self: center
		svg
			width: 55px
			height: 55px
	.footer-menu ul
		display: grid
		grid-template-columns: repeat(3, 1fr)
		a
			color: $color-neutral-dgb
			font-weight: 600
			text-decoration: none
			&:hover
				color: $color-primary-strong-cyan
	.footer-social
		align-self: center
		a
			margin-right: 25px
		#Hifi---Desktop:hover
				fill: $color-primary-strong-cyan
	.footer-fem
		grid-column: 1 / 4
		margin-top: 20px

.parent // Lazy Load Placeholder Generator: https://webdesign-master.ru/services/lazy/
	background-image: url()

@media only screen and (max-device-width: 576px)
	header
		h1
			font-size: 3rem
			margin: 0
			padding: 0
		p
			font-size: 1.6rem

	.two-btn
		display: grid
		grid-template-columns: 1fr
		grid-gap: $gutter
		justify-items: center
		button
			width: 80%
			padding: 10px
			font-size: 1.8rem
		+media-breakpoint-down(sx)
			width: 80%

	.main
		h2
			font-size: 2.8rem
			margin: 0
			padding: 0 $gutter
		p
			font-size: 1.6rem
			padding: $gutter
		.desktop-full
			grid-template-columns: 1fr
			grid-column-gap: 0
			.text-desktop
				grid-template-columns: 1fr
				align-content: center
				justify-self: center
				margin-top: 60px
				h3
					text-align: center
					font-size: 1.65rem
				p
					font-size: 1.2rem
					text-align: center
					padding-bottom: 60px
			.img-desktop img
				padding:
					left: $gutter
					right: $gutter
				left: 0
				clip-path: none

	.devices-sec
		p
			font-size: 1.2rem

	.block-change
		p
			font-size: 1.2rem
			padding: 0 $gutter
		.block-icons
			grid-template-columns: 1fr

	.block-vendors
		grid-template-columns: 1fr
		justify-items: center
		grid-row-gap: 60px

	.block-clipboard
		p
			padding: $gutter

	footer
		grid-template-columns: minmax(375px, 576px)
		grid-template-rows: auto
		grid-row-gap: $gutter
		.footer-logo
			grid-template-columns: minmax(375px, 576px)
		.footer-menu ul
			grid-template-columns: 1fr
			justify-items: center
			li
				font-size: 1.2rem
				padding-bottom: 20px
				color: $color-neutral-grayish-blue
		.footer-fem
			grid-column: auto
		.footer-social
			justify-self: center
			a
				margin: 0 15px